<template>
  <!-- 工单 -->
  <div class="workorder">
    <!-- 导航 -->
    <el-card class="top_nav" :shadow="shadowShow">
      <div class="top_nav_inner">
        <div class="top_nav_left pointer" @click="backHandle">
          <i class="el-icon-arrow-left p_blue" style="font-size: 20px"></i>
          <span class="p_blue">{{ $t('add.add114') }}</span>
        </div>
      </div>
    </el-card>
    <!-- //列表 -->
    <el-card :shadow="shadowShow" style="margin-top: 30px">
      <div v-if="messageNoticeArr.length > 0" class="noti_inner">
        <h2 style="margin-bottom: 20px">{{ $t('add.add154') }}</h2>
        <div v-for="(item, index) in messageNoticeArr" class="noti_item">
          <div class="item_left">
            <img src="@/assets/img/order_yachiYellow.png" alt="" />
          </div>
          <div class="item_right">
            <div class="time">
              <span style="font-weight: bold">{{ item.title }}</span>
              <span>{{ item.createDate }}</span>
            </div>
            <!-- <div class="title">
                            <span style="font-weight:bold">{{ item.title }}</span>
                            <span>{{ item.createDate }}</span>
                        </div> -->
            <div class="content">
              <span>{{ item.content }}</span>
            </div>
          </div>
          <div v-if="user_superAdmin == 1" class="bianji" @click="bianji(item)">
            {{ $t('patient.huanzhe17') }}
          </div>
        </div>
      </div>
      <div v-if="messageNoticeArr.length == 0" class="noti_inner">
        <h2 style="margin-bottom: 20px">{{ $t('add.add154') }}</h2>
        <div class="noti_item" style="width: 100%">
          <div style="width: auto; margin: auto; padding-top: 80px">{{ $t('add.add4') }}...</div>
        </div>
      </div>
    </el-card>
    <el-dialog
      width="700px"
      :close-on-click-modal="false"
      :title="$t('patient.huanzhe17')"
      :visible.sync="isShow"
      append-to-body
    >
      <el-form>
        <el-form-item style="margin-bottom: 10px" label="标题">
          <el-input v-model="form.title" clearable placeholder="请输入标题" />
        </el-form-item>
        <el-form-item style="margin-bottom: 10px" :label="$t('add.add147')">
          <el-input
            v-model="form.content"
            clearable
            type="textarea"
            :rows="3"
            :placeholder="$t('add.add148')"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShow = false">{{ $t('home.home22') }}</el-button>
        <el-button size="small" type="primary" @click="edit">{{ $t('home.home23') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import Course from "@/components/course/index"; //教程
// import Service from "@/components/service/index"; //客服
export default {
  name: 'BLZMasterIndex',
  // components: {
  //     Course,
  //     Service,
  // },
  data() {
    return {
      form: {
        id: '',
        title: '',
        content: '',
      },
      messageNoticeArr: [], // 广告通知
      isShow: false,
      user_superAdmin: '',
    };
  },

  created() {
    this.getMessageNotice();
    this.user_superAdmin = localStorage.getItem('user_superAdmin');
  },

  methods: {
    backHandle() {
      // 返回主页
      this.$router.go(-1);
    },
    bianji(val) {
      this.form = val;
      this.isShow = true;
    },
    edit() {
      if (this.form.title == '') {
        return this.$message.error('请输入标题');
      } else if (this.form.content == '') {
        return this.$message.error(this.$t('add.add148'));
      }
      this.$http
        .post('/messageNotice/updateNotice', this.form)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.$message.success(this.$t('add.add48'));
            this.getMessageNotice();
            this.isShow = false;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    getMessageNotice() {
      this.$http
        .get('/messageNotice/selectIndex')
        .then(({ data: res }) => {
          console.log('res--->', res);
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.messageNoticeArr = res.data;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.workorder {
  // position: relative;
  .noti_inner {
    .noti_item {
      margin-bottom: 70px;
      position: relative;
      display: flex;

      .item_left {
        img {
          width: 30px;
          height: 30px;
        }
      }

      .item_right {
        margin-left: 10px;

        .time {
          display: flex;
          align-items: center;

          span:nth-of-type(1) {
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 20px;
            color: #333333;
          }

          span:nth-of-type(2) {
            margin-left: 30px;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: #333333;
          }
        }

        .title {
          margin-top: 10px;
          font-size: 14px;
          font-weight: 500;
          line-height: 20px;
          color: #333333;
        }

        .content {
          margin-top: 6px;
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          color: #666666;
        }
      }

      .bianji {
        cursor: pointer;
        position: absolute;
        right: 30px;
        top: 10px;
      }
    }
  }
}

.top_nav_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .top_nav_left {
    display: flex;
    align-items: center;

    span {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      // color: $p_blue;
    }
  }
}
</style>
